<template>
  <el-card shadow="hover" header="实时收入" v-loading="loading">
    <scEcharts ref="c1" height="300px" :option="option"></scEcharts>
  </el-card>
</template>

<script>
import scEcharts from "@/components/scEcharts/index.vue";

export default {
  title: "实时收入",
  icon: "el-icon-data-line",
  description: "Echarts组件演示",
  components: {
    scEcharts,
  },
  data() {
    return {
      loading: true,
      option: {},
    };
  },
  created() {
    var _this = this;
    setTimeout(function () {
      _this.loading = false;
    }, 500);

    var option = {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        boundaryGap: false,
        type: "category",
        data: (function () {
          var now = new Date();
          var res = [];
          var len = 30;
          while (len--) {
            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
            now = new Date(now - 2000);
          }
          return res;
        })(),
      },
      yAxis: [
        {
          type: "value",
          name: "价格",
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "收入",
          type: "line",
          symbol: "none",
          lineStyle: {
            width: 1,
            color: "#409EFF",
          },
          areaStyle: {
            opacity: 0.1,
            color: "#79bbff",
          },
          data: (function () {
            var res = [];
            var len = 30;
            while (len--) {
              res.push(Math.round(Math.random() * 0));
            }
            return res;
          })(),
        },
      ],
    };
    this.option = option;
  },
  mounted() {
    var _this = this;
    setInterval(function () {
      var o = _this.option;

      o.series[0].data.shift();
      o.series[0].data.push(Math.round(Math.random() * 100));

      o.xAxis.data.shift();
      o.xAxis.data.push(new Date().toLocaleTimeString().replace(/^\D*/, ""));

      //_this.$refs.c1.myChart.setOption(o)
    }, 2100);
  },
};
</script>
